<template>
  <div>
    <h2>设置</h2>
    <p>这里是设置页面。</p>
  </div>
  <div>
    <el-button type="primary" @click="$router.push('/ImagesManage')">前往镜像管理</el-button>
    <el-button type="success" @click="$router.push('/ContainerManage')">前往容器管理</el-button>
  </div>
  <div style="margin-top: 20px;">
    <!-- 语言切换按钮 -->
        <el-dropdown 
          trigger="click" 
          @command="changeLanguage"
          class="language-switcher"
        >
          <el-button type="text">
            {{ currentLanguageLabel }}<el-icon><arrow-down /></el-icon>
          </el-button>
          <template #dropdown>
            <el-dropdown-menu>
              <el-dropdown-item 
                v-for="lang in supportedLanguages" 
                :key="lang.value"
                :command="lang.value"
                :disabled="lang.value === $i18n.locale"
              >
                {{ lang.label }}
              </el-dropdown-item>
            </el-dropdown-menu>
          </template>
        </el-dropdown>
  </div>
</template>
<script setup lang="ts">
import { ref, computed } from 'vue'
import { useI18n } from 'vue-i18n'
import { ArrowDown } from '@element-plus/icons-vue'

const { locale } = useI18n()
// import { useTypedI18n } from '@/composables/useTypedI18n'

// const { t, locale } = useTypedI18n()
// 支持的语言列表
const supportedLanguages = [
  { value: 'en', label: 'English' },
  { value: 'zh-CN', label: '中文' }
]
// 获取当前语言显示标签
const currentLanguageLabel = computed(() => {
  return supportedLanguages.find(lang => lang.value === locale.value)?.label || 'English'
})

// 切换语言
const changeLanguage = (lang: string) => {
  locale.value = lang
  localStorage.setItem('preferred_language', lang) // 持久化存储
}
</script>
